.weui-navbar {
  position: fixed;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: content-box;
  width: 100%;
  height: 44px;

  background-color: #fff;

  @media (prefers-color-scheme: dark) {
    background-color: #000;

    .grey & {
      background-color: #10110b;
    }
  }

  &.shadow {
    box-shadow: 0 0 4px 1.5px rgb(208 208 208 / 8000%);

    @media (prefers-color-scheme: dark) {
      box-shadow: 0 0 4px 1.5px rgb(47 47 47 / 8000%);
    }
  }
}

.weui-navbar-back-button {
  display: inline-block;
  vertical-align: middle;

  width: 1em;
  height: 2em;
  margin-right: 2px;

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;

  font-size: 12px;

  @media (prefers-color-scheme: dark) {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill='white' fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
  }
}

.weui-header {
  padding: 25px 40px;
}

.weui-header-title {
  font-weight: 400;
  font-size: 20px;
  text-align: left;
}

.weui-header-desc {
  margin-top: 5px;
  color: #888;
  font-size: 14px;
  text-align: left;

  @media (prefers-color-scheme: dark) {
    color: #777;
  }
}
